﻿@{
    ViewData["Title"] = "个人中心";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@model Atlass.Framework.ViewModels.Common.LoginUserDto;
<style type="text/css">
    .user-info-head {
        position: relative;
        display: inline-block;
    }

        .user-info-head:hover:after {
            content: '\f030';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            color: #eee;
            background: rgba(0,0,0,0.5);
            font-family: FontAwesome;
            font-size: 24px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            cursor: pointer;
            line-height: 110px;
            border-radius: 50%;
        }
</style>
<div class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
    <input id="user_id" name="user_id" type="hidden" value="@(Model.Id)" />
    <section class="section-content">
        <div class="row">
            <div class="col-sm-3 pr5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                        <h5>个人资料</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="text-center">
                            <p class="user-info-head" onclick="avatar();">
                            <img class="img-circle img-lg" src="@(Model.Avatar)" onerror="this.src='/ui/images/profile.jpg'">
                            </p>
                            <p><a href="javascript:avatar();">修改头像</a></p>
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <i class="fa fa-user"></i>
                                <b class="font-noraml">登录名称：</b>
                                <p class="pull-right">@(Model.LoginName)</p>
                            </li>
                            <li class="list-group-item">
                                <i class="fa fa-group"></i>
                                <b class="font-noraml">所属部门：</b>
                                <p class="pull-right">@(Model.DeptName)</p>
                            </li>
                            <li class="list-group-item">
                                <i class="fa fa-group"></i>
                                <b class="font-noraml">岗位：</b>
                                <p class="pull-right">@(ViewBag.PostGroup)</p>
                            </li>
                            <li class="list-group-item">
                                <i class="fa fa-phone"></i>
                                <b class="font-noraml">手机号码：</b>
                                <p class="pull-right">@(Model.Phone)</p>
                            </li>
                            <li class="list-group-item">
                                <i class="fa fa-envelope-o"></i>
                                <b class="font-noraml">邮箱地址：</b>
                                <p class="pull-right">@(Model.Email)</p>
                            </li>
                            <li class="list-group-item">
                                <i class="fa fa-envelope-o"></i>
                                <b class="font-noraml">登录IP：</b>
                                <p class="pull-right">@(ViewBag.LoginIp)</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-sm-9 about">
                <div class="ibox float-e-margins">
                    <div class="ibox-title ibox-title-gray dashboard-header">
                        <h5>基本资料</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="nav-tabs-custom">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                                <li><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a></li>
                            </ul>
                            <div class="tab-content">
                                <!--用户信息-->
                                <div class="tab-pane active" id="user_info">
                                    <form class="form-horizontal" id="form-user-edit">

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">用户名称：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="userName" value="@(Model.UserName)" placeholder="请输入用户名称" data-rule="required;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">手机号码：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="mobilePhone" maxlength="11" value="@(Model.Phone)" placeholder="请输入手机号码" data-rule="mobile;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">邮箱：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="email" value="@(Model.Email)" maxlength="50" placeholder="请输入邮箱" data-rule="email;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">性别：</label>
                                            <div class="col-sm-6">
                                                <div class="radio-box">
                                                    <input type="radio" id="gender"  name="gender" value="1" @(Model.Gender==1?"checked":"")/>
                                                    <label for="gender">男</label>
                                                </div>
                                                <div class="radio-box">
                                                    <input type="radio" id="gender1" name="gender" value="0" @(Model.Gender==0?"checked":"")/>
                                                    <label for="gender1">女</label>
                                                </div>
                                                <div class="radio-box">
                                                    <input type="radio" id="gender2" name="gender" value="2" @(Model.Gender==2?"checked":"")/>
                                                    <label for="gender2">未知</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                                <button type="button" class="btn btn-sm btn-danger" onclick="cancel()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <!--修改密码-->
                                <div class="tab-pane" id="modify_password">
                                    <form class="form-horizontal" id="form-user-resetPwd">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">旧密码：</label>
                                            <div class="col-sm-6">
                                                <input type="password" class="form-control" name="oldPassword" placeholder="请输入旧密码">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">新密码：</label>
                                            <div class="col-sm-6">
                                                <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">确认密码：</label>
                                            <div class="col-sm-6">
                                                <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                                <button type="button" class="btn btn-sm btn-danger" onclick="cancel()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@section scripts{
    <script type="text/javascript">
        $(function () {
            $('#form-user-edit').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {

                    let model = $(form).getFormData();
                    model.id = $('#user_id').val();
                    jutils.ajaxPost("/admin/sysuser/updateProfile", model, function (res) {
                        if (res.status) {
                            jutils.refreshTab();
                        }
                    });
                }
            });
            $('#form-user-resetPwd').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    let model = $(form).getFormData();
                    model.id = $('#user_id').val();
                    jutils.ajaxPost("/admin/sysuser/UpdatePassword", model, function (res) {
                        //if (res.status) {
                        //    jutils.refreshTab();
                        //}
                    });
                },
            });

        });
        /*用户管理-头像*/
        function avatar() {

            var url = '/admin/sysuser/avatar';
            jutils.dialogTop("修改头像", url, null,null, function(){
                jutils.refreshTab();
            });
        }

        function cancel() {

            jutils.closeTab(null);
        }
    </script>
}



